<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="RevTaskConfigObj.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>修改任务</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              任务名称：
            </div>
            <input type="text"
                   maxlength="16"
                   placeholder="最长16个字符"
                   v-model="AddDataModal.name"
                   :disabled="RevTaskConfigObj.type == 'detail'"
                   class="modal-text f-l">
          </div>
          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              任务ID：
            </div>
            <input type="text"
                   maxlength="16"
                   placeholder="最长16个字符"
                   v-model="AddDataModal.jobHandler"
                   :disabled="RevTaskConfigObj.type == 'detail'"
                   class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              接入类型：
            </div>
            <select :disabled="RevTaskConfigObj.type == 'detail'"
                    :class="{'disabled-bg-color':RevTaskConfigObj.type == 'detail'}"
                    v-model="AddDataModal.typeId">
              <option v-for=" optionItem in taskType"
                      :key="optionItem.value"
                      :value="optionItem.value">
                {{optionItem.key}}
              </option>
            </select>
          </div>
          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              逻辑名称：
            </div>
            <select  :disabled="RevTaskConfigObj.type == 'detail'"
                     :class="{'disabled-bg-color':RevTaskConfigObj.type == 'detail'}"
                     v-model="trsultDataModal.fromJoinIdData">
              <option v-for=" optionItem in fromJoinIdData"
                      :key="optionItem.value"
                      :value="optionItem.key + '_' + optionItem.value">
                {{optionItem.key}}
              </option>
            </select>
          </div>
          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              比较类型：
            </div>
            <select  :disabled="RevTaskConfigObj.type == 'detail'"
                     :class="{'disabled-bg-color':RevTaskConfigObj.type == 'detail'}"
                     v-model="AddDataModal.func">
              <option v-for=" optionItem in compareType"
                      :key="optionItem.value"
                      :value="optionItem.value">
                {{optionItem.key}}
              </option>
            </select>
          </div>
          <div class="modal-row" v-show="AddDataModal.func == loc_const">
            <div class="modal-form-key f-l indispensable">
              常量：
            </div>
            <select class="opera-select f-l"
                    :disabled="RevTaskConfigObj.type == 'detail'"
                    :class="{'disabled-bg-color':RevTaskConfigObj.type == 'detail'}"
                    v-model="trsultDataModal.operateData">
              <option v-for=" optionItem in operationChar"
                      :key="optionItem.value"
                      :value="optionItem.key + '_' + optionItem.value">
                {{optionItem.key}}
              </option>
            </select>
            <input type="text"
                   maxlength="16"
                   placeholder="最长16个字符"
                   v-model="AddDataModal.constantValue"
                   :disabled="RevTaskConfigObj.type == 'detail'"
                   class="modal-text opera-input f-l">
          </div>
          <div v-show="AddDataModal.func == loc_logic">
            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                比较：
              </div>
              <select :disabled="RevTaskConfigObj.type == 'detail'"
                      :class="{'disabled-bg-color':RevTaskConfigObj.type == 'detail'}"
                      v-model="trsultDataModal.operateData">
                <option v-for=" optionItem in operationChar"
                        :key="optionItem.value"
                        :value="optionItem.key + '_' + optionItem.value">
                  {{optionItem.key}}
                </option>
              </select>
            </div>
            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                逻辑名称：
              </div>
              <select  :disabled="RevTaskConfigObj.type == 'detail'"
                       :class="{'disabled-bg-color':RevTaskConfigObj.type == 'detail'}"
                       v-model="trsultDataModal.compareJoinIdData">
                <option v-for=" optionItem in fromJoinIdData"
                        :key="optionItem.value"
                        :value="optionItem.key + '_' + optionItem.value">
                  {{optionItem.key}}
                </option>
              </select>
            </div>
          </div>
          <div class="modal-row">
            <div class="modal-form-key f-l">
              匹配结果：
            </div>
            <textarea :placeholder="resultStr" disabled v-html="matchingResult" class="modal-text textarea f-l"></textarea>
          </div>

        </div>
        <div class="btns text-r">
          <!--<button type="button" class="btn btn-info" @click="AddFn('test')">test</button>-->
          <button type="button"
                  class="btn btn-info"
                  v-show="RevTaskConfigObj.type == 'update'"
                  @click="AddFn('add')">保存</button>
          <button type="button" class="btn btn-default" @click="closeRoleModal">取消</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "RevTaskConfig",
    props:["RevTaskConfigObj","fromJoinIdData","taskType"],
    data(){
      return{
        AddDataModal: {
          name: '', // 任务名称
          jobHandler: '', // 任务ID（具备唯一性，后台验证）
          typeId: '', // 接入类型
          fromJoinId: '', // 逻辑名称（逻辑来源项）
          func: 0, // 比较类型
          operate: '',   // 逻辑操作符
          constantValue: '', // 常量项（比较类型为常量时）
          compareJoinId: '', // 逻辑名称（比较类型为逻辑时）
          result: '', // 匹配结果
          creator: '' // 创建人
        },
        trsultDataModal: {
          fromJoinIdData: '', // 逻辑名称（逻辑来源项）
          operateData: '',   // 逻辑操作符
          compareJoinIdData: '', // 逻辑名称（比较类型为逻辑时）
        },
        compareType: [], // 比较类型
        loc_logic: 1, // 代表比较项为 1
        loc_const: 2, // 代表常量项为 2
        operationChar: [], // 逻辑操作符
        resultStr: '请正确填写上面选项',
        filterData: [],
        readey: {
          fromJoinIdData: false
        }

      }
    },
    mounted(){
      this.getType('compareType')
      this.getType('operationChar')
    },
    computed: {
      matchingResult (){
        if(this.trsultDataModal.fromJoinIdData.length <= 0 || this.trsultDataModal.operateData.length <= 0) {
          return this.resultStr
        }
        this.AddDataModal.fromJoinId = this.spliceDown(this.trsultDataModal.fromJoinIdData)[1]
        let fromJoinIdKey = this.spliceDown(this.trsultDataModal.fromJoinIdData)[0]
        this.AddDataModal.operate = this.spliceDown(this.trsultDataModal.operateData)[1]
        let operateKey = this.spliceDown(this.trsultDataModal.operateData)[0]
        if (this.AddDataModal.func == this.loc_logic && this.trsultDataModal.compareJoinIdData.length > 0) {
          this.AddDataModal.compareJoinId = this.spliceDown(this.trsultDataModal.compareJoinIdData)[1]
          let compareJoinIdKey = this.spliceDown(this.trsultDataModal.compareJoinIdData)[0]
          return fromJoinIdKey + '&nbsp;&nbsp;&nbsp;&nbsp;' + operateKey + '&nbsp;&nbsp;&nbsp;&nbsp;' + compareJoinIdKey
        } else if (this.AddDataModal.func == this.loc_const && this.AddDataModal.constantValue.length > 0) {
          return fromJoinIdKey + '&nbsp;&nbsp;&nbsp;&nbsp;' + operateKey + '&nbsp;&nbsp;&nbsp;&nbsp;' + this.AddDataModal.constantValue
        } else {
          return this.resultStr
        }
      }
    },
    methods:{
      getInitData () {
        this.s_loading(true)
        if(this.compareType.length <= 0) {
          this.getType('compareType').then(item => {
            this.getInitData()
          })
        } else if (this.operationChar.length <= 0) {
          this.getType('operationChar').then(item => {
            this.getInitData()
          })
        } else {
          this.tableRowAjax()
        }
      },
      tableRowAjax () {
        this.$axios.get(this.Beacon + '/transaction/showUpdate/' + this.RevTaskConfigObj.id).then(res => {
          let content = res.data.content
          this.AddDataModal = {
            name: content.name,
            jobHandler: content.jobHandler,
            typeId: content.typeId,
            fromJoinId: content.fromJoinId,
            func: content.func,
            operate: content.operate,
            compareJoinId: content.compareJoinId,
            constantValue: content.constantValue,
          }
          this.trsultDataModal.fromJoinIdData = this.inValueRetrunKeyAndValue(content.fromJoinId,this.fromJoinIdData)
          this.trsultDataModal.operateData = this.inValueRetrunKeyAndValue(content.operate,this.operationChar)
          this.trsultDataModal.compareJoinIdData = this.inValueRetrunKeyAndValue(content.fromJoinId,this.fromJoinIdData)
          this.s_loading(false)
        }).catch(err => {
          this.s_loading(false)
          console.log(err, '任务配置修改')
        })
      },
      inValueRetrunKeyAndValue (val, data) {
        let KeyAndValue = ''
        data.filter(item => {
          if (val == item.value){
            KeyAndValue = item.key + '_' + item.value
            return true
          }
        })
        return KeyAndValue
      },
      spliceDown (str) {
        if (str.length > 0) {
          return str.split('_')
        }
      },
      // 获取接入类型
      getType (str) {
        return this.$axios({
          url: this.Dictionary + "/tag/detail/type/" + str + "/key/" + str,
          method: 'get'
        }).then(res => {
          let data = []
          res.data.objs.map(item => {
            data.push({
              key: item.name,
              value: item.code,
              description: item.description
            })
          })
          this[str] = data
        }).catch(err => {
          this.s_alert(str+'字典类型接口有问题')
          console.log(err, '数据源类型')
        })
      },
      //清除缓存
      clearData(){
        this.AddDataModal={
          name: '', // 任务名称
          jobHandler: '', // 任务ID（具备唯一性，后台验证）
          typeId: '', // 接入类型
          fromJoinId: '', // 逻辑名称（逻辑来源项）
          func: 0, // 比较类型
          operate: '',   // 逻辑操作符
          constantValue: '', // 常量项（比较类型为常量时）
          compareJoinId: '', // 逻辑名称（比较类型为逻辑时）
          result: '', // 匹配结果
          creator: '' // 创建人
        }
        this.trsultDataModal= {
          fromJoinIdData: '', // 逻辑名称（逻辑来源项）
          operateData: '',   // 逻辑操作符
          compareJoinIdData: '', // 逻辑名称（比较类型为逻辑时）
        }
      },
      //关闭弹窗
      closeRoleModal(){
        this.clearData();
        this.$emit("closeModal");
      },
      // 弹窗确认按钮
      AddFn (str) {
        if (this.verifyForm.isNull(this.AddDataModal.name)) {
          this.s_alert('任务名称不能为空')
          return
        }
        if (this.verifyForm.isNull(this.AddDataModal.jobHandler)) {
          this.s_alert('任务ID不能为空')
          return
        }
        if (this.verifyForm.isNull(this.AddDataModal.typeId)) {
          this.s_alert('接入类型不能为空')
          return
        }
        if (this.verifyForm.isNull(this.AddDataModal.fromJoinId)) {
          this.s_alert('逻辑名称不能为空')
          return
        }
        if (this.verifyForm.isNull(this.AddDataModal.func)) {
          this.s_alert('比较类型不能为空')
          return
        }
        if (this.AddDataModal.func == this.loc_logic) {
          if (this.verifyForm.isNull(this.AddDataModal.operate)) {
            this.s_alert('逻辑比较不能为空')
            return
          }
          if (this.verifyForm.isNull(this.AddDataModal.compareJoinId)) {
            this.s_alert('逻辑名称不能为空')
            return
          }
        }
        if (this.AddDataModal.func == this.loc_const) {
          if (this.verifyForm.isNull(this.AddDataModal.operate)) {
            this.s_alert('逻辑比较不能为空')
            return
          }
          if (this.verifyForm.isNull(this.AddDataModal.constantValue)) {
            this.s_alert('常量值不能为空')
            return
          }
        }
        this.AddDataModal.result = this.matchingResult
        this.AddDataModal.creator = JSON.parse(sessionStorage.getItem("userSession")).userName
        if(str == 'add') {
          this.s_loading(true)
          this.AddDataModal.id = this.RevTaskConfigObj.id
          this.$axios({
            url: this.Beacon + '/transaction/saveOrUpdate',
            data: this.AddDataModal,
            method: 'post'
          }).then(res => {
            this.s_loading(false)
            this.s_alert('修改成功')
            //关闭弹窗
            this.closeRoleModal()
          }).catch(err => {
            this.s_loading(false)
            this.s_alert('修改失败')
            console.log(err, '修改')
          })
        }
      },
    },
    watch: {
      RevTaskConfigObj: {
        handler (val) {
          if (val.isShow) {
            this.getInitData()
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>
